<template>
	<view class="nav-box" :style="{'height':height+'px','background':bgColor}">
		<!-- 自定义导航栏 -->
		<view class="nav-main">
			<view class="nav-main-back" @click="back" v-if="backIcon">
				<uni-icons type="back" size="26" color="#fff"></uni-icons>
			</view>
			<view class="nav-main-title">{{title}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			bgColor: {
				type: String,
				default: "#F5F5F5"
			},
			backIcon: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: "我的"
			}
		},
		data() {
			return {
				//总高度
				height: 0,
			}
		},
		created() {
			this.getHeight();
		},
		methods: {
			//获取屏幕导航栏高度
			getHeight() {
				// 设备系统信息
				let systemInfomations = uni.getSystemInfoSync();
				// 机型适配比例系数
				let scaleFactor = 750 / systemInfomations.windowWidth
				// 当前机型-屏幕高度
				let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx
				// 当前机型-屏幕宽度
				let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx
				// 状态栏高度
				let statusBarHeight = (systemInfomations.statusBarHeight) *
					scaleFactor //rpx
				this.height = statusBarHeight;
				this.$emit('navBarHeight', statusBarHeight);
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.nav-box {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.nav-main {
		position: relative;
		height: 64rpx;
		width: 100vw;
		display: flex;
		align-items: flex-end;

		.nav-main-back {
			position: absolute;
			left: 0;
			bottom: 0;
		}

		.nav-main-title {
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
		}
	}
</style>